<template>
    <div class="customer-detail">
        <div class="left-module">
            <BasicInfo
                :group-id="groupId"
                :cust-status="state.custStatus"
                :base-info="state.baseInfo"
                :tag-info="state.tagInfo"
                :body-info="state.bodyInfo"
                :touch-mode-list="state.touchModeList"
                @initFun="initFun" />
        </div>
        <div class="right-module">
            <Browse :basic-info="state.groupStat" @select-column="onSelectColumn" />
            <Interact />
            <GroupMember />
        </div>
        <select-colunm-dialog
            v-model="selectColumnVisable"
            v-bind="selectColumnProps"
            @submit="onSubmit"
            @cancel="onSubmit">
            <template #description>
                <browse-tootip-desc />
            </template>
        </select-colunm-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';

import SelectColunmDialog from '@/components/zw/select-colunm-dialog/select-colunm-dialog.vue';
import BrowseTootipDesc from './components/browse/browse-tootip-desc.vue';

import BasicInfo from './components/BasicInfo.vue';
import Browse from './components/browse/browse.vue';
import Interact from './components/Interact.vue';
import GroupMember from './components/GroupMember.vue';

import { getGroupDetail, getCustomerGroupDetailStat } from '@/api/customerCenter/groupManage';

const router = useRoute();
const groupId = ref();
const state = reactive({
    wx_external_userid: '',
    custStatus: Number,
    baseInfo: {},
    tagInfo: [],
    bodyInfo: [],
    dataCensus: {},
    touchModeList: {},
    groupStat: []
});

/**
 * 获取数据概览
 */
const initGroupDetailStat = () => {
    getCustomerGroupDetailStat({ type: 1, groupchat_id: Number(router.query.id) || 1 }).then((res: any) => {
        state.groupStat = res;
    });
};

const initFun = () => {
    groupId.value = router.query.id;
    // 获取详情数据
    getGroupDetail({ group_id: router.query.id || 1 }).then((res: any) => {
        state.wx_external_userid = res.wx_external_userid;
        state.custStatus = res.cust_status;
        state.tagInfo = res.base_info.tag_info || [];
        state.bodyInfo = res.bady_info;
        state.baseInfo = res.base_info;
        state.dataCensus = res.data_census;
        state.touchModeList = res.touch_mode_list;
    });
    initGroupDetailStat();
};
initFun();

/* ----------------------------自定义列-start---------------------------- */
const selectColumnVisable = ref(false);

/** 二次处理弹窗的内容 */
const handleFormatData = async (column: any[]) => {
    const res = await getCustomerGroupDetailStat({ type: 2, groupchat_id: Number(router.query.id) || 1 });

    const columnMap = {};
    column.forEach((item: any) => {
        columnMap[item.field_key] = item;
    });

    res.forEach((item: any) => {
        Object.assign(columnMap[item.field_key], item);
    });

    return column;
};

/** 选择列的props参数 */
const selectColumnProps = reactive<ISelectColumnProps>({
    type: 6,
    length: 6,
    title: '数据概览',
    formatData: handleFormatData
});

const onSubmit = () => {
    initGroupDetailStat();
};

/**
 * 打开数据概览配置列
 */
const onSelectColumn = () => {
    selectColumnVisable.value = true;
};
/* ----------------------------自定义列-end---------------------------- */
/** 选择列的props参数 */
interface ISelectColumnProps {
    /** 6: 客户群详情数据概览, 其他可以看组件 */
    type: 6;
    /** 最大选择的长度 */
    length: number;
    /** 弹窗标题 */
    title: string;
    formatData: (column: Array<any>) => void;
}
</script>

<style lang="scss" scoped>
.customer-detail {
    display: flex;
    justify-content: space-between;

    .left-module {
        flex: 0 0 310px;
        width: 310px;
        margin-right: 16px;
    }

    .right-module {
        flex: auto;
    }

    .customer-card {
        margin-bottom: 16px;
        background: #fff;
        border: 1px solid #eaeaea;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}
</style>
